<template>
<el-form-item label="选择村居">
    <el-select :key="villageDataCode" v-model="villageDataCode" filterable placeholder="请选择">
        <el-option v-for="item in village" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</el-form-item>
</template>

<script>
export default {
    props: {
        townId: {
            type: String,
        },
        villageCode: {
            type: String,
        },
    },
    components: {},
    data: () => ({
        village: [],
    }),
    computed: {
        villageDataCode: {
            get() {
                this.toVillage(this.townId);
                return this.villageCode
            },
            set(val) {
                this.villageCode = val
            }
        }
    },
    methods: {
        toVillage(townId) {
            this.village = [];
            if (townId === "440605") {
                this.villageDataCode = "";
                return false;
            }
            this.$common.municipality(townId).then((res) => {
                if (res.errorCode === "00000") {
                    res.data.forEach((item) => {
                        this.village.push({
                            label: item.administrativeName,
                            value: item.administrativeCode,
                        });
                    });
                    this.village.unshift({
                        label: "全部",
                        value: this.village[0].value.substring(0, 9),
                    });
                    // this.villageCode = this.village[1].value.substring(0, 9)
                    this.$nextTick(() => {
                        setTimeout(() => {
                            if (this.villageCode) {
                                this.villageDataCode = this.villageCode;
                            } else {
                                this.villageDataCode = this.village[1].value;
                            }
                        }, 0)
                    })

                }
            });
        },
    },
    watch: {
      villageDataCode: {
            handler(n, o) {
                if (o != n) {
                    this.$emit("on-change", n);
                }
            },
            deep: true,
        },
    },
};
</script>

<style></style>
